<script setup lang="jsx">
import { ArrowLeftIcon, CheckIcon, CloseIcon, HistoryIcon, TimeIcon, BrowseIcon, LinkIcon } from 'tdesign-icons-vue-next'
import { ref } from 'vue'
import TableBase from '@/components/Table-Base.vue'
import { useRoute, useRouter } from 'vue-router'
import MainContent from '@/components/Main-Content.vue'
import { getCompanyItem } from '@/api/company'

const router = useRouter()
const route = useRoute()
const contractStatusMap = {
    0: '待生效',
    1: '生效中',
    2: '已到期',
    3: '已退租',
    '待生效': 'primary',
    '生效中': 'success',
    '已到期': 'warning',
    '已退租': 'danger',
    '待生效icon': <TimeIcon/>,
    '生效中icon': <CheckIcon/>,
    '已到期icon': <HistoryIcon/>,
    '已退租icon': <CloseIcon/>
}
const infoData = ref({})
const listData = ref([])
const columns = ref([
    {
        title: '序号',
        colKey: 'serial-number',
        width: 80
    },
    {
        title: '租赁楼宇',
        colKey: 'name'
    },
    {
        title: '起止日期',
        colKey: 'date'
    },
    {
        title: '合同状态',
        colKey: 'status',

        cell: (h, { row }) => {
            return (
                <t-tag shape="round" theme={ contractStatusMap[row.status] } variant="light-outline">
                    { contractStatusMap[row.status + 'icon'] }
                    { row.status }
                </t-tag>
            )
        }
    },
    {
        title: '租赁合同',
        colKey: 'contractName',
        ellipsis: true,
        cell: (h, { row }) => {
            return (
                <t-link theme="primary" href={ row.contractUrl }>
                    <LinkIcon />
                    <span>{ row.contractName}</span>
                </t-link>
            )
        }
    },
    {
        title: '录入时间',
        colKey: 'createTime'
    },
    {
        title: '操作',
        colKey: 'option'
    }
])

const back = () => router.back()
const getList = async () => {
    const res = await getCompanyItem(route.query.id)
    infoData.value = res.data
    listData.value = res.data.rent.map(e => {
        e.date = e.startTime + '至' + e.endTime
        e.status = contractStatusMap[e.status]
        return e
    })
}
const download = ({ row }) => {
    console.log(row)
}

getList()
</script>

<template>
    <main-content>
        <div class="header">
            <t-button variant="outline" @click="back">
                <template #icon>
                    <ArrowLeftIcon/>
                </template>
                返回
            </t-button>
            <span class="title">企业详情</span>
        </div>

        <t-divider theme="vertical"/>

        <div class="body">
            <t-card title="企业信息" header-bordered style="margin-bottom: 20px;">
                <div class="info">
                    <div class="item">
                        <span>企业名称：</span>
                        <span>{{ infoData.name }}</span>
                    </div>
                    <div class="item">
                        <span>法人姓名：</span>
                        <span>{{ infoData.legalPerson }}</span>
                    </div>
                    <div class="item">
                        <span>注册地址：</span>
                        <span>{{ infoData.registeredAddress }}</span>
                    </div>
                    <div class="item">
                        <span>所在行业：</span>
                        <span>{{ infoData.industryName }}</span>
                    </div>
                    <div class="item image-item">
                        <span>营业执照：</span>
                        <div class="image-box">
                            <t-image-viewer :images="[infoData.businessLicenseUrl]">
                                <template #trigger="{ open }">
                                    <div class="image-viewer">
                                        <img alt="营业执照" :src="infoData.businessLicenseUrl" class="img"/>
                                        <div class="image-viewer-btn" @click="open">
                                            <span><BrowseIcon size="1.4em"/> 预览</span>
                                        </div>
                                    </div>
                                </template>
                            </t-image-viewer>
                        </div>
                    </div>
                </div>
            </t-card>

            <t-card title="联系人信息" header-bordered style="margin-bottom: 20px;">
                <div class="info">
                    <div class="item">
                        <span>联系人员：</span>
                        <span>{{ infoData.contact }}</span>
                    </div>
                    <div class="item">
                        <span>联系电话：</span>
                        <span>{{ infoData.contactNumber }}</span>
                    </div>
                </div>
            </t-card>

            <t-card title="租赁记录" header-bordered class="table-card">
                <table-base :columns="columns" :list="listData">
                    <template #option-table="row">
                        <t-button variant="text" theme="primary" @click="download(row)">合同下载</t-button>
                    </template>
                </table-base>
            </t-card>
        </div>
    </main-content>
</template>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    padding: 20px 20px 0;

    .title {
        color: var(--td-text-color-primary);
        font-size: 24px;
        font-weight: 600;
        margin-left: 30px;
    }
}

.body {
    padding: 10px 30px;

    .t-card {
        width: 100%;

        .info {
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 50%;
                min-width: 200px;
                min-height: 40px;
                display: flex;
                align-items: center;

                span:first-child {
                    color: var(--td-text-color-secondary);
                    min-width: 70px;
                }

                span:last-child {
                    font-weight: 500;
                }

                .image-box {
                    width: 200px;
                    height: 200px;
                    border: 4px solid var(--td-bg-color-secondarycontainer);
                    border-radius: var(--td-radius-medium);
                    margin-top: 10px;

                    .image-viewer {
                        width: 100%;
                        height: 100%;
                        display: inline-flex;
                        position: relative;
                        justify-content: center;
                        align-items: center;
                        border-radius: var(--td-radius-small);
                        overflow: hidden;

                        .img {
                            width: auto;
                            height: auto;
                            max-width: 100%;
                            max-height: 100%;
                            cursor: pointer;
                            position: absolute;
                        }

                        .image-viewer-btn {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: absolute;
                            left: 0;
                            top: 0;
                            opacity: 0;
                            background-color: rgba(0, 0, 0, 0.6);
                            color: var(--td-text-color-anti);
                            line-height: 22px;
                            transition: 0.2s;

                            span {
                                color: var(--td-text-color-anti);
                            }
                        }
                    }

                    .image-viewer:hover .image-viewer-btn {
                        opacity: 1;
                        cursor: pointer;
                    }
                }
            }

            .image-item {
                > span {
                    align-self: flex-start;
                    height: 40px;
                    line-height: 40px;
                }
            }
        }

        .table {
            padding: 0;

            :deep .t-table {
                border-radius: 0 0 var(--td-radius-medium) var(--td-radius-medium);

                .t-table__content {
                    border-radius: 0 0 var(--td-radius-medium) var(--td-radius-medium);

                    .t-table__body {
                        tr:last-of-type {
                            td {
                                border-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    :deep .table-card {
        .t-card__body {
            padding: 0;
        }
    }
}

.t-divider {
    margin: 20px 0;
}
</style>
